<style>
    body {
        background-color: #f9f9f9;
    }
    table tr > th {
        text-align: center;
        vertical-align: middle !important;
        padding: 8px;
    }
</style>
<script>
    var outIds = {% if outIds is defined %} {{ outIds }} {% else %} null {% endif %};
    var id = {{id}};
    var type = {{type}};
    var length = {{length}};
    var groupId = {{groupId}};
    var subject = {{subject}};
    var version = {{version}};
</script>
<div class="row">
    <div class="col-md-6">
        <div class="smart-widget">
            <div class="smart-widget-inner">
                <div class="smart-widget-body">
                    <form id="addGrade_form" class="xh-form"  method="post">
                        <div class="xh-area-form">
                            <table style="width: 100%">
                                <tr class="grade" id="grade" style="height: 20px;">
                                    <td id="grade_list">

                                    </td>
                                </tr>
                            </table>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>